﻿@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <title>Sox - GNN</title>
    <link href="~/Content/css/application.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="~/Content/img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="testpage">
    <meta name="author" content="Geji">
    <meta charset="utf-8">
</head>
<body class="background landing">
    <div class="container">
        <header class="page-header">
            <div class="navbar">
                <div class="logo pull-left">
                    <h4><a href="#"> <strong>Sox</strong></a> <small>Under Preparation</small></h4>
                </div>
                <ul class="nav navbar-nav pull-right navbar-menu hidden-xs">
                    <li class="active">
                        <a href="#">
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#about">
                            About
                        </a>
                    </li>
                </ul>
                @*<ul class="navbar-buttons pull-right">
                    <li>
                        <a href="#" class="btn btn-sm btn-transparent">
                            Preview&nbsp;
                            <i class="fa fa-arrow-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                           class="btn btn-sm btn-transparent">
                            Download&nbsp;
                            <i class="fa fa-download"></i>
                        </a>
                    </li>
                </ul>*@
            </div>
        </header>
        <div class="content">
            <div id="carousel-landing" class="carousel slide carousel-landing carousel-fade">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-landing" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-landing" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-landing" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="animated fadeInLeftBig">
                                    <h1 class="slide-one-header"><strong>Sox</strong> <br>Under Preparation</h1>
                                    <p class="lead hidden-xs">
                                        World <strong>Leading</strong> Anonymous chat room
                                    </p>
                                    <p>
                                        <a href="#" class="btn btn-lg btn-white">
                                            Preview &nbsp; <i class="fa fa-angle-right"></i>
                                        </a>
                                        <a href="Mailto:273401419@qq.com"
                                           class="btn btn-lg btn-transparent">
                                            Sponsor &nbsp; <i class="fa fa-shopping-cart"></i>
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="text-align-center animated fadeInRightBig">
                                    <img src="~/Content/img/jpeg/light-blue-preview-1.png" alt="Second slide">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <h1 class="slide-two-header text-align-center animated fadeInDown">
                            <strong>Sox</strong> & <strong>GNN</strong>
                        </h1>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="animated fadeInLeftBig">
                                    <p>
                                        <a href="#">
                                            <img src="~/Content/img/jpeg/light-blue-laptop-transparent.png" alt="" />
                                        </a>
                                    </p>
                                    @*<p class="text-align-center">
                                        <a href="#" class="btn btn-transparent btn-lg btn-version-preview">
                                            Preview &nbsp; <i class="fa fa-angle-right"></i>
                                        </a>
                                    </p>*@
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="animated fadeInRightBig">
                                    <p>
                                        <a href="#">
                                            <img src="~/Content/img/jpeg/light-blue-laptop-white.png" alt="" />
                                        </a>
                                    </p>
                                    @*<p class="text-align-center">
                                        <a href="#" class="btn btn-white btn-lg btn-version-preview">
                                            Preview &nbsp; <i class="fa fa-angle-right"></i>
                                        </a>
                                    </p>*@
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="animated fadeInLeft">
                                    <h1 class="slide-three-header">
                                        <strong>Fully</strong>
                                        <br>
                                        Responsive
                                    </h1>
                                    <p>
                                        <a href="http://responsinator.com/?url=http%3A%2F%2Fdemo.okendoken.com" class="btn btn-white btn-lg" target="_blank">
                                            Test It
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <p class="animated fadeInUp" style="margin-top: 20px">
                                    <img src="~/Content/img/jpeg/light-blue-phone.png" alt="" />
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control carousel-control-landing" href="#carousel-landing" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
                <a class="right carousel-control carousel-control-landing" href="#carousel-landing" data-slide="next">
                    <span class="icon-next"></span>
                </a>
            </div>
        </div>
    </div>
    <div id="about" class="widget widget-white widget-about">
        <div class="container">
            <div class="row">
                <div class="col-sm-offset-1 col-sm-10">
                    <h2><strong>About Sox</strong></h2>
                    <p>
                        <strong>Sox</strong> - is World Leading Anonymous chat rooms.
                    </p>
                    <div class="row features">
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-danger">
                                                <i class="fa fa-bold"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>Bootstrap 3</h4>
                                        <p>
                                            Light Blue comes with built-in Twitter Bootstrap 3 support.
                                            Easy to design your next web app.
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-warning">
                                                <i class="fa fa-magic"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>Unique design</h4>
                                        <p>
                                            Transparent widgets and gradient background - have you seen something like this
                                            before?
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-success">
                                                <i class="fa fa-wrench"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>Developer-friendly</h4>
                                        <p>
                                            Simple, intuitive and easily maintainable code.
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    <div class="row features">
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-primary">
                                                <i class="fa fa-superscript"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>White & Transparent</h4>
                                        <p>
                                            Two styles each having two background options.
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-lime">
                                                <i class="fa fa-check"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>Web applications</h4>
                                        <p>
                                            LB itself is a web app. Plus there is an Email -
                                            ready-to-use Backbone application.
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-4">
                            <section class="feature">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>
                                            <span class="icon background-info">
                                                <i class="fa fa-css3"></i>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="col-xs-8">
                                        <h4>Sass-powered</h4>
                                        <p>
                                            Variables, mixins, includes - things that
                                            make Light Blue really easy to customize.
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
            <p class="preview text-align-center">
                <a href="Mailto:273401419@qq.com" class="btn btn-lg btn-danger">
                    &nbsp; Contact us &nbsp;
                </a>
            </p>
        </div>
    </div>
    <h2 class="thanks text-align-center">Thanks for watching!</h2>
    <p class="lead text-align-center"><a class="back-to-top" href="#"> back to top <i class="fa fa-angle-up"></i></a></p>

    <!-- jquery and friends -->
    <script src="~/Content/lib/jquery/jquery-2.0.3.min.js"> </script>

    <!-- bootstrap default plugins -->
    <script src="~/Content/lib/bootstrap/transition.js"></script>
    <script src="~/Content/lib/bootstrap/carousel.js"></script>

    <!-- page specific -->
    <script src="~/Content/js/landing.js"></script>


</body>
</html>